/* ==================
          头像
 ==================== */
.avatar {
    font-variant: small-caps;
    margin: 0;
    padding: 0;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: var(--white);
    white-space: nowrap;
    position: relative;
    width: 64rpx;
    height: 64rpx;
    background-size: cover;
    background-position: center;
    vertical-align: middle;
    font-size: 1.5em;
}

.avatar:not([class*='bg-']) {
    background-color: #ccc;
}

.avatar.xs {
    width: 32rpx;
    height: 32rpx;
    font-size: 1em;
}

.avatar.small {
    width: 48rpx;
    height: 48rpx;
    font-size: 1em;
}

.avatar.large {
    width: 96rpx;
    height: 96rpx;
    font-size: 2em;
}

.avatar.xl {
    width: 128rpx;
    height: 128rpx;
    font-size: 2.5em;
}

.avatar .avatar-text {
    font-size: 0.4em;
}

.avatar-group {
    direction: rtl;
    unicode-bidi: bidi-override;
    padding: 0 10rpx 0 40rpx;
    display: inline-block;
}

.avatar-group .avatar {
    margin-left: -30rpx;
    border: 4rpx solid var(--ghostWhite);
    vertical-align: middle;
}

.avatar-group .avatar.small {
    margin-left: -20rpx;
    border: 1rpx solid var(--ghostWhite);
}
